<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>风采之星</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">

<link rel="stylesheet" href="../ActivityCommon/css/swiper-3.4.2.min.css">

<script type="text/javascript" src="../ActivityCommon/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../ActivityCommon/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../ActivityCommon/js/acivityCommon.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/ecmascript" src="../../../js/sha1.js "></script>
<script type="text/javascript" src="../ServiceStar/js/share.js"></script>


<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
	a:link {
		color: #fff;
	}
	
	a:visited {
		color: #fff;
	}
	
	a:hover {
		color: #fff;
	}
	
	a:active {
		color: #fff;
	}
	
	ul li {
		list-style: none;
	}
	
	html, body{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.width-50 {
		width: 50%;
	}
	
	.inline-block {
		display: inline-block;
	}
	
	.link {
		text-decoration: underline;
		position: absolute;
		top: 20px;
		right: 20px;
		color: #fff;
		font-size: 14px;
	}
	
	.wrap {
		width: 100%;
		height: 100%;
	}
	
	.input {
		display: block;
		border: none;
		border-radius: 10px;
		padding: 5px 10%;
		height: 22px;
		line-height: 35px;
		outline: none;
		width: 65%;
		background: #92a4dd url(../ServiceStar/images/zoom.png) no-repeat 8px 6px;
		background-size: 6%;
		margin: 0 auto;
	}
	
	.input::-webkit-input-placeholder {
		color: #575757;
		opacity: 1;
	}
	
	.wrap-box {
		background: #fff;
		padding: 3%;
		width: 90%;
		margin: 0 auto;
		height: auto;
	}
	
	.ul_list {
		background: #fff;
	}
	
	.ul_list li {
		background: #f7f8f8;
		overflow: hidden;
		margin-bottom: 15px;
	}
	
	.left_box {
		width: 50%;
		float: left;
		border: 1px solid #ccc;
	}
	
	.left_box>img {
		width: 100%;
		height: 80%;
	}
	
	.right_box {
		width: 40%;
		float: left;
		font-size: 14px;
		line-height: 1.5;
		display: inline-block;
		padding-left: 10px;
		padding-top: 5px;
	}
	
	.a-btn {
		position: relative;
		top: -4px;
		width: 40%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		background: #6350c3;
		border-radius: 20px;
		color: #fff;
	}
	
	.cont-wrap {
		padding: 0 10px;
		margin-top: 130%;
    	background-color: white;
	}
	
	.cont-wrap p {
		width: 100%;
		padding-bottom: 5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
		
	.cont-wrap span {
		color: red;
	}
	.next-btn {
		display: block;
		width: 80px;
		height: 35px;
		line-height: 35px;
		margin: 0 auto;
		color: #000 !important;
		text-decoration: none;
		background: url(../ServiceStar/images/next-btn.png) no-repeat right;
	}
	
	.dropload-noData {
		text-align: center;
		color: #ccc;
	}
	
 	.swiper-container {
		background: #fff;
	    padding: 3%;
	    width: 90%;
	    height: 100%;
	}
	
</style>
</head>
<body>
	<div style="position:relative;height: 100%">
		<img alt="" src="../ServiceStar/images/pic_01.png" width="100%" height="40%">
		<div style="position:absolute; left: 0%;top: 28%;width:100%;height:60%; border:#000 solid 0px;">
			<input type="text" class="input" placeholder="请输入经销商门店或服务顾问姓名">
		</div>
		<div style="position:absolute; left: 0%;top: 35%;width:100%;height:60%; border:#000 solid 0px;">
			<div class="swiper-container">
				<div class="swiper-wrapper"></div>
			</div>
		</div>
	</div>
	<a class="link">[活动详情]</a>
	
	<script type="text/javascript">
		
		var toloaNum = 0;
		var currentNum = 0;
		
		$(document).ready(function(){
			
			var mySwiper = new Swiper('.swiper-container', {
				direction : 'vertical',
				freeMode : true,
				slidesPerView: 'auto',
				breakpoints: { 
				    320: {
						spaceBetween: 10
				    },
				    480: { 
						spaceBetween: 20
				    },
				    640: {
						spaceBetween: 30
				    },
				    768: {
						spaceBetween: 20
					}
				},
				roundLengths : true, 
				autoHeight: true,
				onTouchEnd: function(swiper){
				    if(swiper.isEnd){
				    	if(currentNum < toloaNum){
				    		loadData(swiper,currentNum);
				    	}
				    }
				},
				onInit: function(swiper){
					$('.input').change(function(){
						if($('.input').val() == null || $('.input').val() == ''){
							swiper.removeAllSlides();
							loadData(swiper,0);
							countToloaNum();
							//initInsert();
						} else {
							swiper.removeAllSlides();
							//var url = "http://172.16.100.88:9013/pointActivity/api/v1/queryAdvisor";
							var url = rootPath + "/pointActivity/api/v1/queryAdvisor";
							var data = {"input":$('.input').val()};
							myAjax.myRequest(url,data,"POST",true,function(data){
								var list = data.resultList;
						    	if(list.length > 0){
						    		$.each(list,function(i,obj){
						    			var id = "" + obj.ADVISOR_ID;
						    			var code = id.substring(id.length-4,id.length);
						    			var tickets = (obj.TICKETS) * 3; 
						    			var result = "";
						    				result +="<div class='swiper-slide' style='background: #f7f8f8;'>";
												result +="<div class='left_box' style='background-image: url(" + obj.ADVISOR_PHOTO + ");background-repeat:no-repeat;background-size:contain;'>";
													/* result +="<img class='block' src='" + obj.ADVISOR_PHOTO + "' alt=''>"; */
													result +="<div class='cont-wrap'>";
					    				 				result +="<p>" + code + "." + obj.ADVISOR_NAME + "</p>";
					    				 				result +="<span class='inline-block width-50' id='" + obj.ADVISOR_ID + "_span'>" + tickets + "票"+"</span>";
					    				 				result +="<a class='inline-block a-btn' href='javascript:void(0)' name='voteButton' onclick='vote(" + obj.ADVISOR_ID + ");'>投票</a>";
					    				 			result +="</div>";
					    				 		result +="</div>";
					    				 		result +="<div class='right_box'>";
					    				 			result +="<p>姓名：" + obj.ADVISOR_NAME + "</p>";
					    				 			result +="<p>店名：" + obj.DEALER_NAME + "</p>";
					    				 			result +="<p>参赛宣言：</p>";
					    				 			result +="<p>" + obj.ADVISOR_DECLARATION + "</p>";
					    				 		result +="</div>";
					    				 result +="</div>";
					    				 swiper.appendSlide(result);
					    				 //swiper.update(true);
						    		});
						    		toloaNum = -1;
								}
							});
						}
					});
					$('.input').change();
				}
			});
		});
		
		function countToloaNum(){
			//var url = "http://172.16.100.88:9013/pointActivity/api/v1/getCountAdvisor";
			var url = rootPath + "/pointActivity/api/v1/getCountAdvisor";
			myAjax.myRequest(url,null,"POST",true,function(data){
				toloaNum = data.result;
			});
		}
		
		function initInsert(){
			//var url = "http://172.16.100.88:9013/pointActivity/api/v1/insertVoter";
			var url = rootPath + "/pointActivity/api/v1/insertVoter";
			myAjax.myRequest(url,null,"POST",true,function(data){
				if(data.message == '0'){
		    		showAlert("您不是会员或车主，无法参与投票！");
		    	}
			});
		}
		
		$('.link').click(function(){
			myAjax.myJump(rootPath + "/views/gmmcActivity/ServiceStar/index.html","replace");
		});
		
		function loadData(swiper,nums){
			//var url = "http://172.16.100.88:9013/pointActivity/api/v1/getAdvisor";
			var url = rootPath + "/pointActivity/api/v1/getAdvisor";
			var data = {"min":nums + ""};
			myAjax.myRequest(url,data,"POST",true,function(data){
				var list = data.resultList;
		    	if(list.length > 0){
		    		$.each(list,function(i,obj){
		    			var id = "" + obj.ADVISOR_ID;
		    			var code = id.substring(id.length-4,id.length);
		    			var tickets = (obj.TICKETS) * 3; 
		    			var result = "";
		    				result +="<div class='swiper-slide' style='background: #f7f8f8;'>";
		    					result +="<div class='left_box' style='background-image: url(" + obj.ADVISOR_PHOTO + ");background-repeat:no-repeat;background-size:contain;'>";
									/* result +="<img class='block' src='" + obj.ADVISOR_PHOTO + "' alt=''>"; */
									result +="<div class='cont-wrap'>";
	    				 				result +="<p>" + code + "." + obj.ADVISOR_NAME + "</p>";
	    				 				result +="<span class='inline-block width-50' id='" + obj.ADVISOR_ID + "_span'>" + tickets + "票"+"</span>";
	    				 				result +="<a class='inline-block a-btn' href='javascript:void(0)' name='voteButton' onclick='vote(" + obj.ADVISOR_ID + ");'>投票</a>";
	    				 			result +="</div>";
	    				 		result +="</div>";
	    				 		result +="<div class='right_box'>";
	    				 			result +="<p>姓名：" + obj.ADVISOR_NAME + "</p>";
	    				 			result +="<p>店名：" + obj.DEALER_NAME + "</p>";
	    				 			result +="<p>参赛宣言：</p>";
	    				 			result +="<p>" + obj.ADVISOR_DECLARATION + "</p>";
	    				 		result +="</div>";
	    				 result +="</div>";
	    				 currentNum = obj.RN;
	    				 swiper.appendSlide(result);
	    				 //swiper.update(true);
	    				 swiper.updateContainerSize();
		    		});
				}
			});
		}
		
		function vote(id,abcd){
			showAlert("请关注广汽三菱公众号,进入风采之星活动参与投票！");
			/* //var url = "http://172.16.100.88:9013/pointActivity/api/v1/doVote";
			var url = rootPath + "/pointActivity/api/v1/doVote";
			var data = {"advisorId":id + ""};
			myAjax.myRequest(url,data,"POST",true,function(data){
				var message = data.message;
		    	if(message == "0"){
		    		showAlert("您不是会员或车主，无法参与投票！");
		    	} else if(message == "1"){
		    		showAlert("您今日票数已投完，明天可以再投！");
		    	} else{
		    		showAlert("您已成功投出一票！");
		    		var n = parseInt($("#" + id + "_span").text().replace(/[^0-9]/ig,"")) + 1;
		    		$("#" + id + "_span").html(n + "票");
		    		//$('.input').change();
		    	}
			}); */
		}

	</script>
</body>
</html>